# -*- coding: utf-8 -*-
<%inherit file="base.mako" />

<%def name="head_tags()">
    <title>Order the images</title>
    ${h.javascript_include_tag(builtins=True)}
</%def>

<h1>Hello, welcome to my first project with Pylons!</h1>
<h2>Put each image to its respective game</h2>
<div id="message" style="width:1125;margin-bottom:5px;border:1px solid brown;text-align:center">
	Drag a image and drop into its respective area
</div>

<div style="width:1125;display:table">
	<div style="float:left">
	
		<div id="warcraft" style="border:1px solid red;width:600;height:295">
		Warcraft3
		</div>
		
		<div style="margin-top:1px;margin-bottom:1px;height:5;width:600;"></div>

		<div id="diablo2" style="border:1px solid blue;width:600;height:295">
		Diablo2

		</div>
	</div>
	<%namespace module="myfirstproject.lib.games" import="Games" />
	<%
	
	session['randomImages'] = ';'.join(c.randomImages)
	session.save()
	%>
	<div id="right_column" style="margin-left:5px;border:1px solid green;float:right;width:505;height:590;_height:610;padding:5px 5px 5px 5px;">
		% for imageUrl in c.randomImages:
			    <img src="${imageUrl}" id="image_${c.randomImages.index(imageUrl)}">
			    ${h.draggable_element("image_" + str(c.randomImages.index(imageUrl)))}
		% endfor
	
	</div>
</div>

${h.drop_receiving_element("diablo2", update="message",  url=h.url_for(action="addImageDiablo" ))}

${h.drop_receiving_element("warcraft",update="message",  url=h.url_for(action="addImageWarcraft" ))}

